<template>
    <div class="">
        <el-row type="flex" class="row-bg" justify="space-between">
            <el-col :span="6">
                <el-input placeholder="关键字..." size="small" v-model="searchKey">
                    <el-button slot="append" icon="search" @click="loadData"></el-button>
                </el-input>
            </el-col>
        </el-row>
        <template>
            <el-table :data="tableData" border style="width: 100%; text-align: center;margin-top:10px;" v-loading.body="loading" @selection-change="handleSelectionChange">
                <el-table-column type="index" style="width:50%"></el-table-column>
                <el-table-column type="selection"></el-table-column>

                <el-table-column prop="huming" header-align="center" label="用户名"></el-table-column>
                <el-table-column prop="kaihuhang" header-align="center" label="开户行"></el-table-column>
                <el-table-column prop="number" header-align="center" label="银行帐号"></el-table-column>
                <el-table-column prop="zfbzh" header-align="center" label="支付宝昵称"></el-table-column>
                <el-table-column prop="zhifubao" header-align="center" label="支付宝账号"></el-table-column>
                <el-table-column prop="name" header-align="center" label="认购名称"></el-table-column>
                <el-table-column prop="price" header-align="center" label="认购价格"></el-table-column>
                <el-table-column prop="maxCount" header-align="center" label="认购最大数量"></el-table-column>
                <el-table-column prop="minCount" header-align="center" label="认购最小数量"></el-table-column>
                <el-table-column prop="createTime" header-align="center" label="认购时间"></el-table-column>
                <el-table-column label="操作" width="120">
                    <template slot-scope="scope">
                        <el-button type="primary" size="mini" @click="e_edit(scope.row)">查看详情</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[5,10,20,40]" :page-size="limit" layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination>
        </template>

        <!--添加弹框-->
        <el-dialog title="客户留言查看" :visible.sync="itemDialogVisible">
            <el-form :model="currentItem" ref="currentItem" style="margin-left: 30px" label-width="100px">

                <el-form-item label="消息内容" prop="huming">
                    <el-input type="textarea" :autosize='autosize' v-model="currentItem.huming" style="width:500px;" readonly></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="beforeSaveItem">确认查看</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>
<script>
var qs = require('qs')
import Editor from '../../components/editor.vue'
import {
	tokenGet,
	jtpost,
	TokenUrl,
	tokenPost,
	delaxios,
} from '../../api/token.js'

export default {
	data() {
		return {
			checked: true,
			tableData: [],
			currentPage: 1,
			autosize: true,
			radio: {
				radioC: '1', //是否可以充值
				radioT: '1', //是否可以提现
				radioD: '1', //充值是否到账
				radioB: '1', //虚拟币类型
				radioY: '1', //是否以太坊
				radioZ: '1', //状态
			},
			typeNumber: [],
			total: 0,
			limit: 10,
			searchKey: '',
			loading: false,
			jinyong: [], //禁用id、
			itemDialogVisible: false,
			currentItem: {},
		}
	},
	methods: {
		handleSizeChange(val) {
			console.log(val)
			this.limit = val
			this.loadData()
		},
		handleCurrentChange(val) {
			console.log(val)
			this.currentPage = val
			this.loadData()
		},
		handleSelectionChange(val) {
			this.typeNumber = val
			this.jinyong = val
			console.log(this.typeNumber)
		},
		/**
		 * @Description: ${获取表格数据}
		 * @Param
		 * @Return
		 * @Author 焦政
		 * @Date 2018/11/14
		 * @Version 1.0
		 */
		loadData() {
			this.loading = true
			let searchParams = `${TokenUrl.getcusMessage}?offset=${this
				.limit *
				(this.currentPage - 1)}&limit=${this.limit}&searchKey=${
				this.searchKey
			}&userId=${localStorage.getItem('userId')}`
			tokenGet(searchParams).then(
				response => {
					console.log(response)
					this.tableData = response.data.data.rows
					this.total = response.data.data.total
					this.loading = false
				},
				response => {},
			)
		},
		//会员类型判断
		checkMemberType(s) {
			if (s == 0) {
				return '普通会员'
			} else if (s == 1) {
				return '销售商'
			} else if (s == 2) {
				return '生产商'
			}
		},
		// 是否通过实名
		checkISReal(i) {
			if (i == 0) {
				return '否'
			} else if (i == 1) {
				return '是'
			} else if (i == -1) {
				return '未通过'
			}
		},
		// 是否提交过实名
		checkSubReal(i) {
			if (i == 0) {
				return '否'
			} else if (i == 1) {
				return '是'
			}
		},
		// 注册类型
		checkRegType(t) {
			if (t == 1) {
				return '支付宝'
			} else if (t == 2) {
				return '银行卡'
			}
		},
		// 是否绑定过手机
		checkfisPhone(i) {
			if (i == 0) {
				return '否'
			} else if (i == 1) {
				return '是'
			}
		},
		// 登录方式
		checkLoginType(t) {
			if (t == 0) {
				return '前台'
			} else if (t == 1) {
				return '后台'
			}
		},
		checkIsActive(a) {
			if (a == 0) {
				return '否'
			} else if (a == 1) {
				return '是'
			}
		},
		// ============================================表格数据状态类型判断👆==============================================//
		beforeSaveItem(formName) {
			this.doSub()
		},
		doSub() {
			jtpost(TokenUrl.addSub, this.currentItem).then(re => {
				if (re.status == 0) {
					this.$alert('添加成功')
					this.itemDialogVisible = false
					this.currentItem = {}
					this.loadData()
				} else {
					this.$alert(re.msg)
				}
			})
		},
		/**
		 * @Description: ${编辑}
		 * @Param
		 * @Return
		 * @Author 焦政
		 * @Date 2018/11/15
		 * @Version 1.0
		 */
		e_edit(p) {
			this.currentItem = p
			console.log(typeof this.currentItem)
			delete this.currentItem.createTime
			this.itemDialogVisible = true
		},
	},

	//引入文本编辑器那个组件
	components: {
		'v-editor': Editor,
	},
	created() {
		this.loadData()
	},
}
</script>
<style>
.el-dialog--small {
	width: 60%;
}
</style>
